<template>
<!-- 子给父传递数据 -->
  <div id="app" class="app">
    <h1>{{ msg }}</h1>
    <!-- 1.属性 -->
    <School :getSchoolName="getSchoolName"></School>
    <hr />
    <!-- 2.vc绑定事件：子组件发射事件的时候，父组件执行回调  -->
    <Student v-on:sgg="getStudentName" demoName="绑定事件"></Student>
    <!-- once代表生效一次   原生事件要特殊处理native事件 -->
    <Student @sgg.once="getStudentName" demoName="绑定事件一次性" @click.native="show"></Student>
    <!-- 3.ref 配合mounted  -->
    <Student ref="stuRef" demoName="绑定事件ref"></Student>
    <hr />

  </div>
</template>

<script>
// 引入的顺序，后面的样式会把前面同名的样式覆盖掉
import Student from "./components/Student.vue";
import School from "./components/School.vue";

export default {
  name: "App",
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log('app收到SchoolName通过props',name);
    },
    getStudentName(name,...params) {
      // es6数组用法=》params
      console.log("app收到StudentName通用自定义事件和emit", name,params);
    },
    getStudentName2(name,...params) {
      // es6数组用法=》params
      console.log("app收到StudentName通用自定义事件和emit,自身mounted来注册事件，绑定回调", name,params);
    },
    show(){
      console.log('click.native原生事件')
    }
  },
  data() {
    return {
      msg: "hello vue",
    };
  },
  mounted(){
    //动态注册事件
    this.$refs.stuRef.$on('refsgg',this.getStudentName2)
    //这里写方法的话，要写箭头函数，不能写普通函数function
    // this.$refs.stuRef.$once('refsgg',this.getStudentName2)//一次性
  }
};
</script>

<style>
.app {
  text-align: center;
  font-size: 20px;
  color: #333;
  background-color: gray;
}
</style>
